<template>
  <q-layout view="hHh LpR lFf" class="bg-gray-50 text-slate-700 dark:text-slate-500 dark:bg-slate-800">
    <q-header reveal bordered class="bg-gray-50 text-slate-700 dark:text-slate-500 dark:bg-slate-800 transparent">
      <gva-header />
    </q-header>

    <q-drawer bordered show-if-above>
      <a侧栏 />
    </q-drawer>

    <q-page-container>
      <q-page-sticky expand position="top" class="justify-start z-10">
        <gva-tabs v-if="config.showTabs" />
      </q-page-sticky>
      <div style="height: 31px;" v-if="config.showTabs"></div>
      <q-page padding class="affix-container ">
        <!-- <el-affix target=".affix-container" :offset="0" class="justify-start z-1000">
          <gva-tabs v-if="config.showTabs" />
        </el-affix> -->
        <router-view v-if="reloadFlag" v-slot="{ Component, route }">
          <div id="gva-base-load-dom" class="gva-body-h bg-gray-50 dark:bg-slate-800">
            <transition mode="out-in" name="el-fade-in-linear">
              <keep-alive :include="routerStore.相续路由组">
                <component :is="Component" :key="route.fullPath" />
              </keep-alive>
            </transition>
          </div>

        </router-view>

        <q-page-sticky position="bottom-right" :offset="fabPos" class="z-10">
          <q-page-scroller :scroll-offset="150" :offset="[200, 10]">
            <q-btn dense glossy rounded icon="keyboard_arrow_up" v-touch-pan.prevent.mouse="moveFab" color="orange" />
          </q-page-scroller>
        </q-page-sticky>
      </q-page>

    </q-page-container>
  </q-layout>
</template>

<script setup>
import a侧栏 from "@/layouts/aside/a侧栏.vue";
import GvaHeader from "@/layouts/header/index.vue";
import useResponsive from "@/hooks/responsive";
import GvaTabs from "./tabs/index.vue";
import BottomInfo from "@/components/bottomInfo/bottomInfo.vue";
import { emitter } from "@/utils/bus.js";
import { ref, onMounted, nextTick, reactive, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useRouterStore } from "@/stores/use_router_store";
import { useUserStore } from "@/stores/use_user_store";
import { useAppStore } from "@/stores";
import { storeToRefs } from "pinia";
const appStore = useAppStore();
const { config, theme, device } = storeToRefs(appStore);

const fabPos = ref([3, 80]);
const moveFab = (ev) => {
  fabPos.value = [fabPos.value[0] - ev.delta.x, fabPos.value[1] - ev.delta.y]
}

defineOptions({
  name: "GvaLayout",
});

useResponsive(true);
const font = reactive({
  color: "rgba(0, 0, 0, .15)",
});

watchEffect(() => {
  font.color =
    theme.value === "dark" ? "rgba(255,255,255, .15)" : "rgba(0, 0, 0, .15)";
});

const router = useRouter();
const route = useRoute();
const routerStore = useRouterStore();

onMounted(() => {
  // 挂载一些通用的事件
  emitter.on("reload", reload);
  if (userStore.loadingInstance) {
    userStore.loadingInstance.close();
  }
});

const userStore = useUserStore();

const reloadFlag = ref(true);
let reloadTimer = null;
const reload = async () => {
  if (reloadTimer) {
    window.clearTimeout(reloadTimer);
  }
  reloadTimer = window.setTimeout(async () => {
    if (route.meta.keepAlive) {
      reloadFlag.value = false;
      await nextTick();
      reloadFlag.value = true;
    } else {
      const title = route.meta.title;
      router.push({ name: "Reload", params: { title } });
    }
  }, 400);
};
</script>

<style lang="scss"></style>
